<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识vue</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        初识Vue
        1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
        2.root容器里面的代码依然符合HTML规范，只不过混入了一些特殊的Vue语法；
        3.root容器里的代码被称为[vue模板]。
        4.容器与Vue实例一一对应
        5.真实开发中只有一个Vue实例，并且会配合着组件一起使用。
        6.{{xx}}中的xx要写成js表达式，并且xx可以自动读取到data中的所有属性；
        7.一旦data中的数据发生改变，那么模板中用到该数据的地方就会自动更新。

        注意区分js代码和js表达式:
            1.表达式：一个表达式会产生一个值，可以放在任何一个需要值得地方。
                1.a
                2.a+b
                3.demo(1)
                4.x === y ? 'a' : 'b'
            2.js代码
                1.if()
                2.for(){}
     -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>Hello {{name}}</h1>
    </div>

    <!-- <div id="root2">
        <h1>Hello {{name}}</h1>
    </div> -->
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示

        //创建Vue实例
        new Vue({
            el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            // el: document.getElementById('root');
            data:{//data中用于存储数据，数据供el所指定的容器去使用。
                name:'尚硅谷'
            }
        });

        // new Vue({
        //     el:'#root2', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
        //     // el: document.getElementById('root');
        //     data:{//data中用于存储数据，数据供el所指定的容器去使用。
        //         name:'atguigu'
        //     }
        // });
    </script>
</body>
</html>